import React, { Component } from 'react';
import { NavBar, Checkbox, Stepper, Empty, Dialog, List, SwipeAction, } from 'antd-mobile'
import "../../styles/Shop_Cart.scss"
import * as service from "../../api/index"


class Shop_Cart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            shoplist: [],//购物车列表
            shop: [],//下面10个商品列表
            cartid: '',//购物车的商品cartid
            zongqian: 0,//总价格
            count: 0//总数量
        };
    }
    async componentDidMount() {
        //调购物车列表
        this.cart_list()
        //商品列表
        const res3 = await service.pro_list()
        this.setState({ shop: res3.data.data })
    }

    //封装了查看购物车列表  方便多次修改调用（包含价格更改）
    async cart_list() {
        var res = await service.cart_list({ userid: localStorage.getItem('userid'), })
        this.setState({ shoplist: res.data.data }, () => { this.money() })
    }
    // 单选事件
    async danxuan(value) {
        console.log(value);
        const one_xuan = await service.cart_selectone({ cartid: this.state.cartid, flag: value })
        this.cart_list()
    }
    //全选事件
    async quanxuan(value) {
        // console.log(value);
        const xuan = await service.cart_selectall({ userid: localStorage.getItem('userid'), type: value })
        this.cart_list()
    }
    //点击步数事件
    async bian(value) {
        //数量更新
        var res1 = await service.cart_updatenum({ cartid: this.state.cartid, num: value })
        //查看购物车列表
        this.cart_list()
        if (value == 0) {
            this.one_del()
        }
    }
    //点击删除事件
    async one_del(cartid) {
        //删除当前选中商品
        var del = await service.cart_remove({ cartid: cartid || this.state.cartid })
        //重新调购物车列表
        this.cart_list()
    }
    //计算价格
    money() {
        var qian = 0
        var shu = 0
        this.state.shoplist?.filter((item) => { return item.flag == true })?.map((item) => {
            return (
                qian += item.num * item.originprice,
                shu += item.num
            )
        })
        this.setState({ zongqian: qian, count: shu },)
    }
    // 获取item中的cartid和单价
    async bianhua(item) {
        // console.log(item);
        this.setState({ cartid: item.cartid })
    }
    //传参商品id到详情页
    shop_id(id) {
        // console.log(id);
        this.props.history.push({ pathname: '/detail', state: { proid: id } })
    }
    //点击结算跳转去确定订单
    async sure() {
        var add = await service.order_addOrder({ userid: localStorage.getItem('userid') })
        // console.log(add.data.time);
        this.setState({ time: add.data.time })
        // console.log(this.state.zongqian);
        this.props.history.push({ pathname: '/sure_order', state: { time: add.data.time, zongqian: this.state.zongqian } })
        this.deleteCartItem()
    }
    //支付时删除购物车选中的数据
    async deleteCartItem() {
        var res1 = await service.order_deleteCartItem({ userid: localStorage.getItem('userid'), })
        //重新调购物车列表
        this.cart_list()
    }
    //点击全部删除购物车所有列表商品
    async del() {
        var res1 = await service.cart_removeall({ userid: localStorage.getItem('userid'), })
        //重新调购物车列表
        this.cart_list()
    }

    render() {
        return (
            <div className='shop_cart'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }} ><p>购物车 <span onClick={() => { this.del() }}>🗑</span></p></NavBar>
                </div>
                <div className="box">
                    <div className="hh">
                        {
                            this.state.shoplist ?
                                this.state.shoplist.map((item, index) => {
                                    return (
                                        <SwipeAction
                                            rightActions={[
                                                {
                                                    key: 'delete',
                                                    text: '删除',
                                                    color: 'danger',
                                                    onClick: () => {
                                                        Dialog.confirm({
                                                            content: '确定要删除吗？',
                                                            onConfirm: () => {
                                                                this.one_del(item.cartid)
                                                                console.log(item.cartid);
                                                            }
                                                        })
                                                    },
                                                },
                                            ]}
                                            key={index}
                                        >
                                            <List.Item >
                                                <div className="one" key={item.proid} onClick={() => { this.bianhua(item) }}>

                                                    <Checkbox checked={item.flag} onChange={value => { this.danxuan(value) }}></Checkbox>

                                                    <div className="left">
                                                        <img src={item.img1} alt="" />
                                                    </div>
                                                    <div className="right">
                                                        <h5>{item.proname}</h5>
                                                        <div className="xia">
                                                            <div className="zuo">
                                                                <span>￥{item.originprice}</span>
                                                            </div>
                                                            <div className="you">
                                                                <Stepper
                                                                    min={0}
                                                                    max={1000}
                                                                    defaultValue={item.num}
                                                                    onChange={value => {
                                                                        // console.log(value)
                                                                        this.bian(value)
                                                                    }}
                                                                    onFocus={(value) => {
                                                                        this.bian(value)
                                                                    }}
                                                                />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </List.Item>
                                        </SwipeAction>
                                    )
                                })
                                : <Empty
                                    style={{ padding: '64px 0' }}
                                    imageStyle={{ width: 128 }}
                                    description='暂无数据' />
                        }
                    </div>
                    <h2 onClick={() => { this.props.history.push('/index/fenlei') }}>可能你想要</h2>
                    <div className="shangping">
                        {
                            this.state.shop.map((item, index) => {
                                return (
                                    <div className="box" key={index} onClick={() => { this.shop_id(item.proid) }}>
                                        <img src={item.img1} alt="" />
                                        <p>{item.proname}</p>
                                        <span>￥{item.originprice}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="xuan">
                        <Checkbox onChange={value => { this.quanxuan(value) }} ></Checkbox>
                        <p>合计 <span>￥{this.state.zongqian}</span></p>
                        <button onClick={() => {
                            this.sure()
                        }}>去结算({this.state.shoplist ? this.state.count : 0})</button>
                    </div>
                </div>
            </div>
        );
    }
}

export default Shop_Cart;
